@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义样式 */
.gradient-bg {
  background: linear-gradient(135deg, #00D4AA 0%, #14b8a6 50%, #0d9488 100%);
  position: relative;
  overflow: hidden;
}

.gradient-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
}

.card-shadow {
  box-shadow: 0 8px 25px rgba(0, 212, 170, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
}

.status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  position: relative;
}

.status-running {
  background: linear-gradient(45deg, #10b981, #34d399);
  animation: pulse-glow 2s infinite;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.status-paused {
  background: linear-gradient(45deg, #f59e0b, #fbbf24);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.status-stopped {
  background: linear-gradient(45deg, #6b7280, #9ca3af);
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

.btn-primary {
  @apply bg-gradient-to-r from-boss-green to-primary-600 hover:from-primary-600 hover:to-boss-green text-white font-semibold py-3 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl;
}

.btn-secondary {
  @apply bg-white hover:bg-gradient-to-r hover:from-gray-50 hover:to-white text-boss-green border-2 border-boss-green font-semibold py-3 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg;
}

.btn-icon {
  @apply bg-white hover:bg-boss-green text-boss-green hover:text-white border-2 border-boss-green p-3 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg;
}

.stat-card {
  @apply bg-gradient-to-br from-white to-gray-50 rounded-2xl p-5 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 border border-gray-100;
}

.stat-number {
  @apply text-3xl font-bold bg-gradient-to-r from-boss-green to-primary-600 bg-clip-text text-transparent;
}

.record-item {
  @apply flex items-center justify-between p-4 bg-gradient-to-r from-white to-gray-50 rounded-xl border border-gray-100 hover:border-boss-green hover:shadow-md transition-all duration-300 cursor-pointer transform hover:scale-105;
}

.warning-card {
  @apply bg-gradient-to-r from-amber-50 to-orange-50 border-l-4 border-amber-400 rounded-r-xl shadow-md;
}

.info-card {
  @apply bg-gradient-to-r from-blue-50 to-cyan-50 border border-blue-200 rounded-xl shadow-md;
}

.popup-container {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.glass-effect {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 212, 170, 0.2);
}

/* 滚动条美化 */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #00D4AA, #14b8a6);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
}
